
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div x-data="WubiInput()">
		<div>
			<input type="button" @click="toggleTextarea" value="编辑输入文本" />
			<input type="button" @click="resetProgress" value="重置进度" />
		</div>

		<textarea x-show="showTextarea" x-model="target" x-ref="textarea">
		</textarea>

		<div id="inputbox">
			<input x-model="inputtext" @keyup="onTextChanged()" placeholder="在此开始输入" class="caret-hidden" id="inputtext"></input><br />
			<input x-model.number="progress" type="number"></input><br />
			<template x-if="!isStopWord(getCharacter())">
				<img :src="`cache/${getCharacter()}.gif`" /><br />
			</template>
		</div>

		<p x-init="getText()">
			<span x-text="getTargetDone()" class="text-done"></span><span id="cursor"></span><span x-text="getTargetTodo()" class="text-todo"></span>
		</p>
	</div>

	<script src="script.js" defer></script>
	<script src="alpinejs-3.12.2.js" defer></script>
	<!-- <script src="//unpkg.com/alpinejs" defer></script> -->

</body>
